<template>
  <div>
    <div class="sidebar">
      <div class="info">
        <el-dropdown>
          <div class="photo" style="cursor:pointer;">
            <img :src="loadResource(store.state.userInfo.header)" alt="">
          </div>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item @click="$router.push('/index/user')"><i class="el-icon-user-solid"
                                                                        style="margin-right: 10px"></i>个人资料
              </el-dropdown-item>
              <el-dropdown-item @click="lg"><i class="el-icon-more-outline" style="margin-right: 10px"></i>退出登录
              </el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
        <div>
          <p class="name">{{ store.state.userInfo.nickname }}</p>
          <p class="name">虚拟余额: {{ money }}</p>
        </div>
        <el-button @click="addMoney($event)">充值</el-button>
      </div>
      <el-menu
          mode="horizontal"
          :default-active="$router.currentRoute.value.path"
          router
      >
        <el-menu-item index="/index/mall">
          <i class="el-icon-help"></i>
          <span>商城</span>
        </el-menu-item>
        <el-menu-item index="/index/music">
          <i class="el-icon-help"></i>
          <span>音乐</span>
        </el-menu-item>
        <el-menu-item index="/index/attachments">
          <i class="el-icon-help"></i>
          <span>附件</span>
        </el-menu-item>
        <el-menu-item index="/index/user">
          <i class="el-icon-help"></i>
          <span>用户</span>
        </el-menu-item>
      </el-menu>
    </div>
    <pop-box :start-x="startX" :start-y="startY" size="Small">
      <div class="money-adder">
        <h1>充值</h1>
        <div style="margin-top: 20px">
          <span>请输入金额：</span>
          <el-input placeholder="input money" v-model="vMoney" class="w-50 m-2"/>
        </div>
        <el-button @click="doAddMoney">确定</el-button>
      </div>
    </pop-box>
  </div>
</template>

<script setup lang="ts">
import {defineComponent, getCurrentInstance, onMounted, onUnmounted, ref, watch} from "vue";
import {get, loadResource, logout, post} from '../http'
import {useRouter} from "vue-router";
import {useStore} from "vuex";
import PopBox from "./popBox.vue";
import {resTip} from "../util/Common";

const router = useRouter();
const store = useStore();

//退出登录
async function lg() {
  await logout()
  await router.push('/login')
}

let interval: any;
onMounted(async () => {
  await getUserInfo();
})
onUnmounted(() => {
  clearTimeout(interval)
})

//通知
watch(() => store.state.notifyReloadNickNameAndHeadImg, () => {
  getUserInfo()
})
let money = ref<any>(0);
let vMoney = ref<any>(0);

//获取登录用户信息
async function getUserInfo() {
  const response = await get('/member/message/query');
  if (response.code == 200) {
    store.commit('setUserInfo', response.data)
    money.value = (await get('/member/message/money/get')).data;
  }
}


let startX = ref(0);
let startY = ref(0);

async function addMoney(event: any) {
  startX.value = event.clientX
  startY.value = event.clientY
}
const {proxy}:any=getCurrentInstance();
async function doAddMoney() {
  resTip(proxy, await post(`/member/message/money/update?update=${vMoney.value}`, {}))
  money.value = (await get('/member/message/money/get')).data;
}

</script>

<style scoped lang="scss">
.money-adder {
  position: absolute;
  top: 15%;

  h1 {
    text-align: center;
    margin-bottom: 50px;
  }

  margin-left: 30px;
  margin-right: 30px;

  .el-button {
    margin-top: 50px;
    width: 100%;
  }
}

.fade-enter-active {
  transition: all .3s ease;
}

.fade-leave-active {
  transition: all .8s cubic-bezier(1.0, 0.5, 0.8, 1.0);
}

.fade-enter, .fade-leave-to
  /* .slide-fade-leave-active for below version 2.1.8 */
{
  opacity: 0;
}

.sidebar {
  color: #fff;
  background: #ecd2d2;
  transition: all .3s;
  position: relative;
  display: flex;
  justify-content: space-around;


  .el-menu {
    width: 800px;
    border: none;
    background: none;
    display: flex;
    align-items: center;

    .el-menu-item {
      height: 100%;
      width: 200px;
      float: none;
      border: none;
      color: #000000;
      font-size: 15px;
      text-align: left;
      transition: all .3s ease;
      position: relative;
      display: flex;
      justify-content: center;
      align-items: center;


      i {
        color: #fff;
        vertical-align: middle;
      }

      &:focus {
        color: #fff;
        background-color: #0e8bff;
      }

      &:hover, &.is-active {
        color: #ff0000;
        background: #fdbfbf;
        position: relative;

        i {
          color: #ff0000;
        }
      }
    }
  }

  .info {
    text-align: center;
    display: flex;
    align-items: center;

    .photo {
      box-sizing: content-box;
      width: 65px;
      height: 65px;
      margin: auto;
      border-radius: 50%;
      background: #fff;
      overflow: hidden;
      transition: all .3s;
      border: 5px solid #ff0000;

      img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
    }

    .name {
      color: #ff0000;
      margin-left: 20px;
      width: 100px;
    }

    .el-button {
      height: 100%;
      margin-left: 20px;
      background-color: #ecd2d2;
      border: none;
      color: black;

      &:hover {
        color: #ff0000;
        background-color: #fdbfbf;
      }
    }

  }

  .el-icon-open, .el-icon-turn-off {
    font-size: 20px;
    position: absolute;
    bottom: 10px;
    left: 30px;
    cursor: pointer;
    color: #83c3ff;

    &:hover {
      color: #fff;
    }

    &.el-icon-turn-off {
      left: 50%;
      transform: translateX(-50%);
    }
  }
}

.misk {
  position: relative;
  width: 100%;
  height: 100%;
  z-index: 999;
  background: rgba(127, 127, 127, 0);
  display: none;
}

.btn {
  position: fixed;
  bottom: 20px;
  right: 30px;
  background: #c6e1ff;
  height: 40px;
  width: 40px;
  border-radius: 50%;
  text-align: center;
  line-height: 40px;
  color: #0084ff;
  font-size: 24px;
  z-index: 999999;
  display: none;

  &.el-icon-close {
    font-size: 20px;
    line-height: 42px;
  }
}
</style>